<template>
  <div style="position: fixed;z-index: 100;">
    <PopUp :popupOption="popupData"></PopUp>
    <div id="select-left-bar">
      <a-auto-complete
        style="width: 200px"
        @change="itemselect"
        @search="onSearch"
        placeholder="输入名称查询"
      >
        <template slot="dataSource">
          <a-select-option v-for="coll in selectSource" :key="coll">{{coll}}</a-select-option>
        </template>
      </a-auto-complete>
      <a-button slot="suffix" class="search-btn" type="primary" @click="btn_search">
        <a-icon type="search" />
      </a-button>
      <a-row>
        <a-col class="search-select">
          <transition name="info">
            <div style="margin-top:10px;" v-show="searchSelectShow">
              <a-card title="煤层数据">
                <a href="#" @click="closecard" slot="extra">关闭</a>
                <a-row style="margin-bottom:10px;">
                  <a-col>
                    <a-table
                      :dataSource="leftTableData"
                      :columns="columns"
                      rowKey="kid"
                      size="middle"
                    >
                      <template slot="actionRender" slot-scope="text, record">
                        <span>
                          <a @click="editRecord(record)">编辑</a>
                          <a-divider type="vertical" />
                          <a @click="monitorPointLocate(record)">定位</a>
                        </span>
                      </template>
                    </a-table>
                  </a-col>
                </a-row>
              </a-card>
            </div>
          </transition>
        </a-col>
      </a-row>
    </div>
    <TitleLenged :isShow="isShowTitle" :titleText="titleText"></TitleLenged>

    <CostomProgress :title="c_title" :modal2Visible="c_visable" :percent="c_percent"></CostomProgress>
    <a-drawer
      title="详细信息"
      :width="450"
      @close="onClose"
      :maskClosable="false"
      :visible="visible"
      :wrapStyle="costomstyle"
      :zIndex="10000"
    >
      <a-form :form="form">
        <div style="display:none">
          <a-form-item v-bind="formItemLayout" label="id">
            <a-input v-decorator="['id']" />
          </a-form-item>
        </div>
        <a-form-item v-bind="formItemLayout" label="名称">
          <a-input v-decorator="['ckqmc']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="分层名称">
          <a-input v-decorator="['fcm']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="类型及名称">
          <a-input v-decorator="['lxjmc']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="自燃类型">
          <a-input v-decorator="['zrlx']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="自燃点数量">
          <a-input v-decorator="['zrdsl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="自埋数量">
          <a-input v-decorator="['zlsl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="验收情况">
          <a-input v-decorator="['ysqk']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="SO2年排放量">
          <a-input v-decorator="['so2pfl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="NOx年排放量">
          <a-input v-decorator="['noxpfl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="颗粒物年排放量">
          <a-input v-decorator="['klwpfl']" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="面积">
          <a-input v-decorator="['mj']" />
        </a-form-item>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }"
      >
        <a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
        <a-button @click="onSave" type="primary">保存</a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';
import PopUp from './PopUp';
import TitleLenged from '../mainContent/TitleLenged.vue';
import CostomProgress from '../progress/index.vue';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
export default {
  name: 'R1010304',
  computed: {
    ...mapGetters(['map', 'contentHeight'])
  },
  data() {
    return {
      costomstyle: { height: 'calc(100% - 108px)', overflow: 'auto' },
      //传递到弹窗组件中的数据
      popupData: {},
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      //自定义进度条数据
      c_title: '',
      c_percent: 0,
      c_visable: false,
      //矿区本地数据
      mineLocalData: null,
      //矿区名称和许可证代码
      mineSource: [],
      //文本框中的值
      search_val: '',
      //下拉框中的数据
      selectSource: [],
      //数据表格显示隐藏
      searchSelectShow: false,
      //表格数据
      leftTableData: [],
      //列
      columns: [
        {
          title: '采矿区名称',
          dataIndex: 'ckqmc',
          key: 'ckqmc',
          align: 'center'
        },
        {
          title: '日燃类型',
          dataIndex: 'zrlx',
          key: 'zrlx',
          align: 'center'
        },
        {
          title: '面积',
          dataIndex: 'mj',
          key: 'mj',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          //width: 85,
          align: 'center',
          scopedSlots: {
            customRender: 'actionRender'
          }
        }
      ],
      form: this.$form.createForm(this),
      visible: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      }
    };
  },
  components: {
    TitleLenged,
    CostomProgress,
    PopUp
  },

  mounted: function() {
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });
      this.c_title = '加载中';
      this.c_visable = true;

      var container = document.getElementById('popup');
      let markerSetting = {
        map: this.map,
        element: container
      };
      let markerMap = mapOper.addMarker(markerSetting);
      this.changeMap({ map: markerMap });

      //加载矿区wfs图层
      let params = {
        this: this,
        url:
          config.baseMapUrl +
          'wuhai-wfsmap?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=coalganguehill&OUTPUTFORMAT=json',
        successFunc: response => {
          let that = this;
          that.mineLocalData = response.data;
          let tempsource = [];

          _.forEach(response.data.features, function(item) {
            tempsource.push(item.properties.ckqmc);
          });
          that.mineSource = _.uniq(tempsource);
          that.selectSource = that.mineSource;
          let style = mapOper.getGeoJsonStyle('CoalGanguehill');
          let wfsParams = {
            map: that.map,
            jsonData: that.mineLocalData,
            style: style,
            styleFunc: null,
            selectFunc: function(e) {
              if (e.target.getFeatures().getLength() == 1) {
                let feature = e.target.getFeatures().item(0);

                let extents = feature.getGeometry().getExtent();
                let popset = {
                  map: that.map,
                  coordinate: [
                    (extents[2] + extents[0]) / 2,
                    (extents[3] + extents[1]) / 2
                  ]
                };

                that.popupData = {
                  display: 'block',
                  contentType: 'CoalGanguehill',
                  Title: feature.get('ckqmc'),
                  fcm: feature.get('fcm'),
                  lxjmc: feature.get('lxjmc'),
                  zrlx: feature.get('zrlx'),
                  zrdsl: feature.get('zrdsl'),
                  zlsl: feature.get('zlsl'),
                  ysqk: feature.get('ysqk'),
                  so2pfl: feature.get('so2pfl'),
                  mj: feature.get('mj'),
                  noxpfl: feature.get('noxpfl'),
                  klwpfl: feature.get('klwpfl')
                };
                mapOper.showPopUp(popset);
                let zoomparams = {
                  map: that.map,
                  center: popset.coordinate,
                  zoom: 8
                };
                mapOper.ZoomAndCenter(zoomparams);
              } else {
                that.popupData = { display: 'none' };
              }
            }
          };
          let wfsmap = mapOper.loadWFSLayer(wfsParams);
          this.changeMap({ map: wfsmap });
          that.c_title = '加载中';
          that.c_visable = false;
          this.isShowTitle = true;

          this.titleText = '乌海煤层分布数据';
        }
      };
      commonOper.HttpGet(params);
    } else {
      this.$router.push({
        //核心语句
        path: 'R101.html' //跳转的路径
      });
    }
  },
  methods: {
    onSearch(value) {
      let temp = [];
      _.forEach(this.mineSource, function(o) {
        if (o.indexOf(value) > 0) {
          temp.push(o);
        }
      });
      this.selectSource = temp;
    },
    itemselect(value) {
      this.search_val = value;
    },
    btn_search() {
      let that = this;
      that.searchSelectShow = true;
      let resArr = [];
      if (that.search_val == '') {
        resArr = that.mineLocalData.features;
      } else {
        resArr = _.filter(that.mineLocalData.features, function(o) {
          if (o.properties.ckqmc == that.search_val) {
            return o;
          }
        });
      }

      let tabledata = [];
      _.forEach(resArr, function(item) {
        tabledata.push({
          kid: item.properties.id,
          ckqmc: item.properties.ckqmc,
          zrlx: item.properties.zrlx,
          mj: item.properties.mj
        });
      });
      that.leftTableData = tabledata;
    },
    monitorPointLocate(record) {
      let resArr = _.filter(this.mineLocalData.features, function(o) {
        if (o.properties.ckqmc == record.ckqmc) {
          return o;
        }
      });
      let geojson = {
        type: 'FeatureCollection',
        name: 'coalganguehill',
        features: resArr
      };
      let styleops = mapOper.getGeoJsonStyle('highlightmine');
      let jsonmap = mapOper.loadHightLightLayer(this.map, styleops, geojson);
      this.changeMap({ map: jsonmap });
      let extents = mapOper.getPolygonExtents(resArr[0].geometry.coordinates);
      let popset = {
        map: this.map,
        coordinate: [
          (extents[2] + extents[0]) / 2,
          (extents[3] + extents[1]) / 2
        ]
      };

      this.popupData = {
        display: 'block',
        contentType: 'CoalGanguehill',
        Title: resArr[0].properties.ckqmc,
        fcm: resArr[0].properties.fcm,
        lxjmc: resArr[0].properties.lxjmc,
        zrlx: resArr[0].properties.zrlx,
        zrdsl: resArr[0].properties.zrdsl,
        zlsl: resArr[0].properties.zlsl,
        ysqk: resArr[0].properties.ysqk,
        so2pfl: resArr[0].properties.so2pfl,
        mj: resArr[0].properties.mj,
        noxpfl: resArr[0].properties.noxpfl,
        klwpfl: resArr[0].properties.klwpfl
      };
      mapOper.showPopUp(popset);
      let zoomparams = {
        map: this.map,
        center: [(extents[2] + extents[0]) / 2, (extents[3] + extents[1]) / 2],
        zoom: 8
      };
      mapOper.ZoomAndCenter(zoomparams);
    },
    editRecord(record) {
      let resArr = _.filter(this.mineLocalData.features, function(o) {
        if (o.properties.id == record.kid) {
          return o;
        }
      });
      let temp = {
        id: resArr[0].properties.id,
        ckqmc: resArr[0].properties.ckqmc,
        fcm: resArr[0].properties.fcm,
        lxjmc: resArr[0].properties.lxjmc,
        zrlx: resArr[0].properties.zrlx,
        zrdsl: resArr[0].properties.zrdsl,
        zlsl: resArr[0].properties.zlsl,
        ysqk: resArr[0].properties.ysqk,
        so2pfl: resArr[0].properties.so2pfl,
        mj: resArr[0].properties.mj,
        noxpfl: resArr[0].properties.noxpfl,
        klwpfl: resArr[0].properties.klwpfl
      };
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(temp);
      });
    },
    closecard() {
      this.searchSelectShow = false;
    },

    onClose() {
      this.visible = false;
    },
    onSave() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          // let requestStr = "/sydinfo/addsydwatercheck";
          let data = {
            id: Number(values.id),
            ckqmc: values.ckqmc,
            fcm: values.fcm,
            lxjmc: values.lxjmc,
            zrlx: values.zrlx,
            zrdsl: values.zrdsl,
            zlsl: values.zlsl,
            ysqk: values.ysqk,
            so2pfl: values.so2pfl,
            mj: values.mj,
            noxpfl: values.noxpfl,
            klwpfl: values.klwpfl
          };
          // if (this.operateType == "UPDATE") {
          //   data.id = this.currentData.id;
          //   requestStr = "/sydinfo/editsydwatercheck";
          // }
          let params = {
            this: this,
            url: config.webapiUrl + '/coalganguehill/editcoalganguehill',
            data: data,

            successFunc: result => {
              if (result.data.code == 0) {
                this.$message.success(result.data.data);
                this.visible = false;
              } else {
                this.$message.error('请求失败，请稍后重试！');
              }
            },
            failFunc: result => {
              console.log('handleSubmit---failFunc---', result);
              this.$message.error('网络错误，请检查连接！');
            }
          };
          commonOper.HttpPost(params);
        }
      });
    },
    ...mapActions(['changeMap', 'changeLengedTitle'])
  }
};
</script>

